@import "../../styles/variables.scss";
.react-button {
  font-size: 15px;
  border-radius: 0.4em;
  padding: 8px 15px;
  user-select: none;
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: var(--font-color-black-90--);
  font-weight: 400;
  display: flex;
  align-items: center;
  &:not([disabled="true"]):hover {
    opacity: 0.8;
  }
  &:not([disabled="true"]):active {
    opacity: 1;
  }
  .icon-left,
  .icon-right {
    height: 1em;
    width: auto;
    &.loading {
      .icon {
        animation: loadingRotate 1s linear infinite;
      }
    }
  }
  .icon-left {
    margin-right: 0.2em;
  }
  .icon-right {
    margin-left: 0.2em;
  }
}
.button-large {
  padding: 10px 15px;
  font-size: 16px;
}
.button-small {
  padding: 4px 7px;
  font-size: 14px;
}
.button-primary {
  background-color: var(--button-primary--);
  color: var(--font-color-white-90--);
  &.button-danger {
    background-color: var(--button-danger-bg--);
  }
}
.button-default {
  color: var(--font-color-black-90--);
  border: 1px solid var(--button-default-border-color--);
  &:not([disabled="true"]):hover,
  &:not([disabled="true"]):active {
    color: var(--button-primary--);
    border-color: var(--button-primary--);
  }
  &.button-danger {
    border-color: var(--button-danger-bg--);
    color: var(--button-danger-bg--);
  }
}
.button-dashed {
  color: var(--font-color-black-90--);
  border: 1px dashed var(--button-default-border-color--);
  &:not([disabled="true"]):hover,
  &:not([disabled="true"]):active {
    color: var(--button-primary--);
    border-color: var(--button-primary--);
  }
  &.button-danger {
    border-color: var(--button-danger-bg--);
    color: var(--button-danger-bg--);
  }
}
.button-text {
  &:not([disabled="true"]):hover {
    background: var(--button-test-hover-bg--);
  }
  &:not([disabled="true"]):active {
    background: var(--button-test-active-bg--);
  }
}
.button-link {
  color: var(--button-primary--);
  &.button-danger {
    color: var(--button-danger-bg--);
  }
}
@keyframes loadingRotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
